import { Layout, Button, Modal } from 'myselfantd';
import React, { useState } from 'react';
import AlarmRecord from './AlarmRecord';
import FaultRecord from './FaultRecord';
import WarnDetail from './WarnDetail';

const App: React.FC = () => {
  const [key, setKey] = useState('0');
  const [isShow, setVisible] = useState<boolean>(false);
  return (
    <>
      <Layout.TabsTemplate
        targetKey={key}
        keyChnage={(key: any) => setKey(key)}
        tabBarExtraContent={
          <Button.Image
            size="large"
            style={{ position: 'absolute', right: '10px', top: '10px' }}
            type="primary"
            onClick={() => setVisible(true)}
            icon={'alarm'}>
            报警设置
          </Button.Image>
        }>
        <AlarmRecord title="围栏设置" />
        <FaultRecord title="阈值设置" />
      </Layout.TabsTemplate>
      {isShow && (
        <Modal.Dialog showDialog={isShow} changeDialog={() => setVisible(false)} size={'big'}>
          <WarnDetail />
        </Modal.Dialog>
      )}
    </>
  );
};

export default App;
